import React from 'react';
import { connect } from 'dva';
import {  Button, Table, Form, Input, Popconfirm } from 'antd';
import RoleModal from '../../components/sys/RoleModal';
import RolePermissionModal from '../../components/sys/RolePermissionModal';
const FormItem = Form.Item;

function Role({ dispatch, role, loading, form }) {

  const { getFieldDecorator, getFieldsValue } = form;
  const { currentItem, permissionModalVisible, modalType } = role
  const columns = [{
    title: '角色名称',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },{
    title: '权限',
    dataIndex: 'permissionName',
    key: 'permissionName',
    width: 800,
  },{
    title: '操作',
    key: 'operation',
    width: 100,
    render: (text, record) => (
        <span>
            <RoleModal title="编辑角色" record={record}  onOk={editHandler.bind(null, record.id_)}>
            <a>编辑</a>
            </RoleModal>
            <span className="ant-divider" />
            <a onClick={onPermission.bind(null, record.id_, record.name)}>设置权限</a>
            <span className="ant-divider" />
            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
            <a>删除</a>
            </Popconfirm>
        </span>
    ),
  }];

  const rolePermissionModalProps = {
    item: role.currentItem,
    type: '权限设置',
    permissions : role.permissions,
    rolepermissions:role.rolepermissions,
    visible:permissionModalVisible,    
    dispatch: dispatch,
    key:role.newKey,
    onOk(data) {
      dispatch({
        type: `role/${role.modalType}`,
        payload: data
      });
    },
    onCancel() {
      dispatch({
        type: 'role/hidePermission'
      });
    },
  };


  const submitHandle = () => {
    dispatch({
        type: 'role/queryList',
        payload: { ...getFieldsValue() },
    });
  }

  const createHandler = (values) => {
    dispatch({
      type: 'role/create',
      payload: values,
    });
  }

  function onPermission(id,name,values){
    dispatch({
      type: 'role/permission',
      payload: {
        modalType: 'setPermission',
        id: id,
        name:name,
      }
    });
  }

  const editHandler = (id, values) => {
    dispatch({
      type: 'role/edit',
      payload: { id, ...values },
    });
  }

  function deleteHandler(id) {
    dispatch({
      type: 'role/remove',
      payload: {id:id,search:{...getFieldsValue()}},
    });
  }


  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{}}>
        <div style={{backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
          <Form layout="inline" >
            <FormItem>
              {getFieldDecorator('name',{initialValue:''})(
                <Input type="text" placeholder="请输入名称" style={{ width:'200px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
            </FormItem>
            <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
              <FormItem>
                <RoleModal title="新增角色" record={{}}  onOk={createHandler}>
                  <Button type="primary" size='large'>新增角色</Button>
                </RoleModal>
              </FormItem>
            </div>
         </Form>
        </div>
        <div style={{width:'100%',padding:"30px 20px",}}>
          <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={role.roleList} pagination={false}
          />
        </div>
        <RolePermissionModal {...rolePermissionModalProps} />
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return { role : state.role,loading:state.loading.models.role};
}

Role = Form.create()(Role);

export default connect(mapStateToProps)(Role);
